<script setup>
import SvgIcon from "@/components/iconfont/SvgIcon.vue";
import buttonStore from "@/store/button.js";
import useUserInfoStore from "@/store/user.js";
import {ArrowRight} from '@element-plus/icons-vue'

import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";

const router = useRouter();

const store = buttonStore()
const userStore = useUserInfoStore()
const handleCollapse = () => {
  store.isCollapse = !store.isCollapse;
}

const handleLogOut = () => {
  window.localStorage.clear()
  ElMessage.success("退出成功！");
  router.push('/')
}

//面包屑
import {useRoute} from 'vue-router'
import {computed, handleError, onMounted, ref, watch} from "vue";

const route = useRoute()

const pathList = ref()
const homepage = ref('首页')
const getCurrentPath = () => {
  pathList.value = route.matched.filter(item => item.meta && item.meta.title);
  // console.log(pathList.value)
}
//组件挂载时执行
onMounted(() => {
  getCurrentPath();
})
//监听路由变化监听路由变化
watch(route, (to, from) => {
  pathList.value = to.matched.filter(item => item.meta && item.meta.title);
  // console.log(pathList.value)
  // for (let item of pathList.value) {
  //   // 在这里使用 item
  //   console.log(item.meta.title);
  //   console.log(item.path);
  // }
  // console.log(to);
  // console.log(from);
}, {immediate: true});

const handleEnterUser = () =>{
  router.push('/userDetail');
}
</script>

<template>
  <el-header class="layout-header">
    <div class="content">
      <div class="l-content">
        <el-button role="button" class="menu-button" @click="handleCollapse">
          <el-icon size="27px" color="#409efc">
            <SvgIcon iconName="icon-caidan"/>
          </el-icon>
        </el-button>
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{path:'/home'}">{{ homepage }}</el-breadcrumb-item>
          <el-breadcrumb-item :to="item.path" v-for="(item, index) in pathList" :key="index">{{
              item.meta.title
            }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="r-content">
        <el-dropdown>
          <el-avatar
              :size="60"
              :src="userStore.userInfo.avatar?'/aps/'+userStore.userInfo.avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"
          ></el-avatar>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleEnterUser">个人中心</el-dropdown-item>
              <el-dropdown-item @click="handleLogOut">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </el-header>

</template>

<style scoped lang="less">
.l-content {
  display: flex;
  margin: 20px 20px 0 0;
}

.content {
  display: flex;
  flex-direction: row;
  justify-content: space-between; /*主轴上的对齐方式 -->其子元素一个左一个右*/
}

.menu-button {
  background-color: #001529;
  padding: 0;
  margin-left: 0;
  margin-bottom: 0;
}

.el-breadcrumb {
  margin-top: 9px;
  margin-bottom: 0;
  margin-left: 3px;
}

.r-content {
  display: flex;
}

.layout-header {
  color: #ffd04b; /*设置元素内文本的颜色*/
  background-color: #001529; /*背景颜色*/
  padding: 0;
  width: 100%;
}
</style>